<template>
    <div class="pack" style="display: flex;justify-content: space-around">
        <div class="outer">
            <div class="container" v-for="(item) in filterPostings" :key="item.id">
                <div class="guidance" title="点击可查看详情" @click="getDetailPage(item.id)">
                    <!-- <div class="img">pic</div> -->
                    <div style="display: flex;width: 100%; color: #333;justify-content: space-evenly;">
                        <div class="title">{{ item.title }}</div>
                        <!-- <div class="content" v-html="sanitizeContent(item.content)"></div> -->
                        <div class="bottom">
                            <div class="support" style="display: flex;">
                                {{ item.time }}
                            </div>
                            <!-- <div class="step" style="display: flex;">
                            <svg-icon icon-name="step" style="margin-top:6px;"></svg-icon>
                            <div style="margin: 5px;">3</div>
                        </div>
                        <div class="author">
                            <div>作者：学而不思则罔思而不学则怠</div>
                        </div>
                        <div style="margin-left: 20px;">...</div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: flex; margin-left: 30%; width: 100%; ">
                <el-pagination v-model:current-page="currentPage" :hide-on-single-page="true" :page-size="12"
                    :size="size" :background="true" layout="total, prev, pager, next" :total="total"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
        <div class="hot-topic">
            <h3>帖子热度Top10排行榜</h3>
            <!-- <div class="time">更新于：{{ currentTime }}</div> -->
            <div class="content">
                <ul>
                    <li v-for="(item, index) in postRanking" :key="index">
                        <span>{{ item.rank }}</span>
                        <span>{{ item.title }}</span>
                        <span>{{ item.readCount }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getselectPage, getRank } from '@/api/employmentGuidance';
import { ElMessage, ComponentSize } from "element-plus";
import { log } from 'echarts/types/src/util/log.js';

const router = useRouter();
// const goToDetailPage = () => {
//     console.log("跳转成功")
//     router.push(`/employmentGuidance/guidanceDetail`)
// }


//分页数据
const currentPage = ref(1);
const total = ref(0);
const size = ref<ComponentSize>("default");
const Postings = ref([]);

onMounted(() => {
    queryPositings();
    console.log("Postings:", Postings.value);
    console.log("filterPostings:", filterPostings.value);
});

//过滤帖子内容
const filterPostings = computed(() => {
    return Postings.value.filter(item => [4].includes(item.type));
    // return Postings.value; // 暂时不进行筛选
})

//获取帖子信息
const queryPositings = async () => {
    const res = await getselectPage(4, currentPage.value, 12);
    if (res.code === 200) {
        Postings.value = res.data.list;
        total.value = res.data.total;
    } else {
        ElMessage.error("请检查网络问题，稍后重试");
    }
};
queryPositings();

//帖子跳转方法
const getDetailPage = (id) => {
    router.push(`/employmentPolicy/guidanceDetail?id=${id}`)
}

//分页变化
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    currentPage.value = val;
    queryPositings();
};


const sanitizeContent = (content: string) => {
    if (!content) return '';
    return content.replace(/<[^>]*>/g, '');
};


const postRanking = ref([])  //帖子排名

const rank = async () => {
    const res = await getRank();
    if (res.code == 200) {
        console.log("排行查询成功");
        postRanking.value = res.data;
        console.log(res.data);

    }
}
rank();

</script>


<style lang="scss" scoped>
.pack {
    display: flex;
    min-height: 90vh;
}

.outer {
    margin: 10px;
    display: flex;
    flex-direction: column;
}



.container {
    width: 95%;
}

.guidance {
    background-color: green;
    width: 100%;
    margin: 5px;
    height: 80%;
    display: flex;
    border: 1px solid #ccc;
    // background: rgba(255, 255, 255, 0.3);
    background: rgba(89, 165, 245, 0.2);
    backdrop-filter: blur(10px);
    border-top: 1px solid #ffffff50;
    border-left: 1px solid #ffffff50;
    border-radius: 15px;
    cursor: pointer;
    // line-height: 80px;
    margin-bottom: 0;

}

.guidance:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

// .guidance .img {
//     background-color: pink;
//     border-radius: 15px;
//     height: 100%;
//     width: 200px;
//     margin-right: 10px;
// }

.guidance .title {
    font-size: 18px;
    // margin: 10px;
    margin-left: 10px;
    margin-top: 10px;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guidance .content {
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guidance .bottom {
    display: flex;
    margin: 10px;
}

.guidance .bottom .step {
    margin-left: 20px;
    margin-right: 20px;
}

.author div {
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

//热搜榜
.hot-topic {
    border: 1px solid lightgrey;
    box-shadow: 2px 2px 6px lightgray;
    border-radius: 15px;
    width: 380px;
    height: 500px;
    margin-top: 17px;
    margin-left: -30px;

}

.hot-topic h3 {
    font-size: 20px;
    color: #333;
    text-align: center;
    background-color: #fff;
    margin: 10px 0;
    margin-top: 0;
    border-radius: 10px 10px 0 0;
    height: 40px;
    line-height: 40px;
}

.hot-topic .time {
    height: 14px;
    font-size: 16px;
    margin: 5px 20px;
}

.hot-topic .content ul {
    list-style: none;
    padding: 0px;
    margin-top: -10px;
}

.hot-topic .content ul li {
    height: 45px;
    font-size: 16px;
    border-bottom: 1px dotted #ddd;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #333;
}

.hot-topic .content ul li:nth-child(odd) {
    background-color: #d4eaf7;
}

.hot-topic .content ul li:nth-child(even) {
    background-color: #71c4ef;
}

.hot-topic span:nth-child(2) {
    width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.hot-topic span:nth-child(2) p {
    width: 240px;
    height: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.hot-topic li:nth-child(1) span:nth-child(1) {
    color: red;
    font-weight: bold;
}

.hot-topic li:nth-child(2) span:nth-child(1) {
    color: #ff5c55;
    font-weight: bold;
}

.hot-topic li:nth-child(3) span:nth-child(1) {
    color: #ffa552;
    font-weight: bold;
}

.hot-topic .content ul li:last-child {
    border-radius: 0 0 8px 8px;
    margin-bottom: 0;
}

</style>